<!-- 分账列表页 -->
<template>
  <view v-if="shenheStatus == 0" class="list-page">
    <view class="list-body">
	  <template v-if="listData.length > 0">
		<view class="list-item" v-for="(item, index) in listData" :key="index">
		  <view class="list-item-left">
		    <view class="item-order-num">{{$t('home.orderNo')}}：{{ item.order_no }}</view>
		    <view class="item-order-time">{{ item.created_at }}</view>
		  </view>
		  <view class="list-item-right">
		    <view :class="{ 'item-order-status': item.pay_status == '已分账' }">{{
		      item.pay_status
		    }}</view>
		    <view class="item-order-price">
		      <text>￥</text>
		      <text>{{ item.amount | priceBeforeZero }}</text>
		      <text>{{ item.amount | priceAfterZero }}</text>
		    </view>
		  </view>
		</view>
	  </template>
	  <u-empty :text="$t('integral.noRecords')" mode="list" v-else></u-empty>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe'
export default {
  components: {Shenhe},
  data() {
    return {
      pay_price: 0,
      listData: [],
      page: 1,
      totalPage: 0,
      pageSize: 10,
    };
  },
  onLoad(t) {},
  onShow() {
    // 判断是否登录
    const isLogin = this.$utils.isLogin();
    if (isLogin) {
      this.getListData({ page: this.page });
    }
  },
  filters: {
    priceBeforeZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  onReachBottom() {
    this.page++;
    if (this.page > Math.ceil(this.totalPage / this.pageSize)) return;
    this.getListData({ page: this.page, loadmMore: true });
  },
  methods: {
    getListData(params) {
      uni.showLoading({
        title:this.$t('home.loading'),
        mask: true,
      });
      this.$allrequest.facePay.getSplitAccountList(params).then((res) => {
        uni.hideLoading();
        if (!res.code && res.data) {
          if (params.loadmMore) {
            this.listData = [...this.listData, ...res.data.list];
          } else {
            this.listData = res.data.list;
          }
          this.totalPage = res.data.page_count;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFangSC;

  .list-body {
    width: 100%;
    padding-top: 24rpx;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-radius: 24rpx;
      padding: 37rpx;
      margin-bottom: 24rpx;
      .list-item-left {
        font-size: 30rpx;
        font-weight: 500;
        color: #262626;
        line-height: 1;

        .item-order-time {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
          margin-top: 30rpx;
        }
      }
      .list-item-right {
        font-size: 24rpx;
        font-weight: 400;
        color: #fe5339;
        line-height: 32rpx;
        .item-order-price {
          font-size: 22rpx;
          font-weight: 500;
          color: #fe5339;
          display: flex;
          align-items: baseline;
          margin-top: 20rpx;

          text:nth-child(2) {
            font-size: 34rpx;
          }
        }
        .item-order-status {
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>
